<template>
  <div class="list" ref="wrapper">
  	<div>
  		<div class="area">
  			<div class="title border-topbottom">当前城市</div>
  			<div class="button-list">
  				<div class="button-wrap">
  					<div class="button">{{ city }}</div>
  				</div>
  			</div>
  		</div>
  		<div class="area">
  			<div class="title border-topbottom">热门城市</div>
  			<div class="button-list">
  				<div class="button-wrap" 
            v-for="item of cityData.hotCities" 
            :key="item.id"
            @click="cityChange(item.name)"

          >
  					<div class="button">{{item.name}}</div>
  				</div>
  			</div>
  		</div>
  		<div class="area" 
        v-for="(item,index) of cityData.cities" 
        :ref="index" 
        :key="index"
      >
  			<div class="title border-topbottom">{{index}}</div>
  			<div class="item-list"  
          v-for="city of item" 
          :key="city.id"
          @click="cityChange(city.name)"
        >
  				<div class="item border-topbottom">{{city.name}}</div>
        </div>
  		</div>
  	</div>
  </div>
</template>

<script>
import Bscroll from "better-scroll"
import { mapState,mapMutations } from "vuex"

export default {
  name: 'CityList',
  props: {
    cityData: Object,
    letter: String
  },
  components: {
  	Bscroll
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    ...mapMutations(['cityUpdata']),
    cityChange (cityName) {
      localStorage.city = cityName;
      this.cityUpdata(cityName);
      this.$router.push('/');
    }
  },
  mounted: function(){
  	this.scroll = new Bscroll(this.$refs.wrapper, {click: true});
  },
  watch: {
    letter: function(){
      if(this.letter){
       const element = this.$refs[this.letter][0];
       this.scroll.scrollToElement(element);
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.list
		position: absolute;
		top: 1.58rem;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	.border-topbottom
		&:after
			border-color: #ccc;
		&:before
			border-color: #ccc;
	.title
		line-height: .4rem;
		background: #eee;
		padding-left: .2rem;
		color: #666;
	.button-list
		padding: .1rem;
		overflow: hidden;
		padding: .1rem .6rem .1rem .1rem;
		.button-wrap
			float: left;
			width: 33.33%;
			.button
				padding: .1rem 0;
				margin: .1rem;
				text-align: center;
				border: .02rem solid;
	.item-list
		line-height: .74rem;
		color: #666;
		.item
			padding-left: .2rem;

		
</style>
